<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="$t('配置')" :v-if="dialogVisible" :visible.sync="dialogVisible" width="450px" @close='close' class="learnConfigDialog">
    <el-form ref="form" :model="record" label-width="70px" :rules="rules" label-position="left" style="width:350px;margin: 0 30px;">
      <el-form-item :label="$t('依赖条件')" prop="name">
        {{$t('当前模式：')}}{{ modeList[mode] }}
        <i class="el-icon-circle-check" v-if="mode === 'learning'" style="color:#67C23A;font-size:16px;"></i>
        <el-tooltip class="item" v-else effect="light" :content="$t('开启自学习将自动切换到学习模式')" placement="top">
          <i class="el-icon-warning-outline" style="color:#E6A23C;font-size:16px;"></i>
        </el-tooltip>
        <br>
        {{$t('深度过滤协议分析')}}
        <i class="el-icon-circle-check" v-if="analysisType === 'ON'" style="color:#67C23A;font-size:16px;"></i>
        <el-tooltip class="item" v-else effect="light" :content="$t('如果不开启深度协议分析将无法查看工作协议流！')" placement="top">
          <i class="el-icon-warning-outline" style="color:#E6A23C;font-size:16px;"></i>
        </el-tooltip>
        <el-switch :width="lang === 'zh'?56:70" v-model="analysisType" class="analysisTypeSwitch switch" active-color="#009966" inactive-color="#CCCCCC" active-value="ON" inactive-value="OFF" :active-text="$t('开启')" :inactive-text="$t('关闭')">
        </el-switch>
      </el-form-item>
      <el-form-item style="width:325px;" :label="$t('时间类型')" prop="type">
        <el-radio-group v-model="record.type">
          <el-radio label="hour">{{$t('小时')}}</el-radio>
          <el-radio label="day">{{$t('天')}}</el-radio>
          <el-radio label="week">{{$t('周')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('时间')" prop="time">
        <el-input v-emoji v-model="record.time" style="width:217px;" size="small"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">{{$t('确 定')}}</el-button>
      <el-button @click="dialogVisible = false">{{$t('取 消')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { setLearnConfig } from '@/api/safe/intellect/learnConfig'
import { setStatus } from '@/api/safe/analysis'
import { getRunInfo, switchRunMode } from '@/api/system/run'
import Template from '../../../access/template/Template.vue'
export default {
  components: { Template },
  name: 'learnConfigDialog',
  data () {
    var validateName = (rule, value, callback) => {
      if (String(value).trim() === '') {
        callback(new Error(this.$t('不能为空')))
      } else if (!this.isInteger(value)) {
        callback(new Error(this.$t('只能输入整数')))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      lang: this.$i18n.locale,
      record: {
        status: '',
        type: 'hour',
        time: ''
      },
      recordCopy: {
        status: '',
        type: 'hour',
        time: ''
      },
      modeList: {
        'learning': this.$t('学习模式'),
        'checking': this.$t('测试模式'),
        'filter': this.$t('管控模式')
      },
      mode: '',
      analysisType: 'OFF',
      analysisTypeOld: 'OFF',
      rules: {
        time: [{ required: false, validator: validateName, trigger: 'blur' }]
      }
    }
  },
  methods: {
    init (data) {
      this.dialogVisible = true
      this.record.status = data
      getRunInfo().then(res => {
        this.mode = res.info[0].mode
        this.analysisType = res.info[0].analysis_status
        this.analysisTypeOld = res.info[0].analysis_status
      })
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.mode !== 'learning') {
            switchRunMode({ mode: 'learning' }).then(res => {
              this.submitFunc()
            })
          } else {
            this.submitFunc()
          }
        }
      })
    },
    submitFunc () {
      if (this.analysisType !== this.analysisTypeOld) {
        setStatus({ status: this.analysisType }).then(res => {
          this.analysisTypeOld = this.analysisType
          setLearnConfig(this.record).then(res => {
            this.$messages.success(this.$t(res.msg))
            this.$parent.listData()
            this.close()
          })
        })
      } else {
        setLearnConfig(this.record).then(res => {
          this.$messages.success(this.$t(res.msg))
          this.$parent.listData()
          this.close()
        })
      }
    },
    close () {
      this.dialogVisible = false
      this.record = Object.assign({}, this.recordCopy)
      this.mode = ''
      this.analysisType = 'OFF'
      this.analysisTypeOld = 'OFF'
      this.$refs.form.resetFields()
      this.$parent.statusDisable()
    },
    isInteger (value) {
      return (!isNaN(value) && (parseInt(value).toString().length === String(Number(value)).length))
    }
  }
}
</script>
<style lang="scss" scoped>
.learnConfigDialog {
  .el-switch {
    margin-left: 15px;
  }
}
</style>
